<template>
	<el-container>
		<el-main v-loading="loading">
			<el-row type="flex" justify="end" class="height-100 overflow-hidden hidden-xs-only">
				<img v-if="bg.img" class="bg-img height-100vh width-100vw" :src="bg.img" />
				<div v-if="bg.cover_decide" :style="{'background':bg.coverColor}" class="cover"></div>
				<el-col class="infoBox y_flex_column " :xl='5' :lg='5' :md="8" :sm='9' :xs='15'>
					<el-form ref="form" :model="form" label-width="80px">
						<el-form-item label="UserName">
							<el-input v-model="form.UserName"></el-input>
						</el-form-item>
						<el-form-item label="Password">
							<el-input v-model="form.Password" show-password></el-input>
						</el-form-item>
						<el-form-item label="Remember">
							<el-switch v-model="switch_data"></el-switch>
						</el-form-item>
						<el-col :push='7'>
							<el-button @click="Login" style="padding: 10px 50px;" size="mini" type="primary" round>Login
							</el-button>
						</el-col>
					</el-form>
				</el-col>
			</el-row>
		</el-main>
	</el-container>
</template>

<script>
	var that;
	export default {
		data() {
			return {
				loading: false,
				bg: {
					coverColor: 'rgba(0,0,0,0.14)',
					cover_decide:true,
					img: '', // This is the custom background image address
				},
				form: { // This is the submitted form data
					UserName: '',
					Password: '',
				},
				switch_data: false,
			}
		},
		mounted() {
			this.manbePasswordIF()
		},
		methods: {
			Login() {
				if (this.switch_data) {
					let data = JSON.stringify({
						form: this.form,
						switch_data: this.switch_data
					})
					localStorage.setItem('ManbePassword', data)
				} else {
					localStorage.removeItem('ManbePassword')
				}
				this.$router.push('/Console/index')
			},

			// 判断是否记住密码
			manbePasswordIF() {
				if (localStorage.getItem('ManbePassword')) {
					this.switch_data = true
					this.form = JSON.parse(localStorage.getItem('ManbePassword')).form
				} else {
					this.switch_data = false
				}
			},

			// 判断是否有token
			checkToken() {
				if (localStorage.getItem('token')) {
					console.log('token:' + localStorage.getItem('token'));
					this.$model.get('/pc/chateToken').then(res => {
						console.log(res)
						localStorage.setItem('user', JSON.stringify(res.data))
						// this.$router.push('/home/manage')
					})
				}
			},
		}
	}
</script>

<style>

</style>

<style scoped lang="scss">
	.el-main {
		padding: 0px !important;
		height: 100vh;
	}

	.cover {
		width: 100vw;
		height: 100vw;
		position: absolute;
		z-index: 1;
	}

	.bg-img {
		position: absolute;
		background: #ffffff;

	}

	.infoBox {
		position: relative;
		z-index: 2;
		height: 260px;
		margin: 100px 150px 0px 0px;
		padding: 20px;
		line-height: 40px;
		border-radius: 5px;
		background: rgba(85, 170, 255, 0.8);

	}
</style>
